<template>
  <div>
    <p>ref,作用类似jq中的$('.class')选择器,选中元素然后操作元素.这种方式会直接操作dom,和vue的思想相违背,所以不常用,用于复杂的dom.</p>
    <p>ref可以选择的内容:1.普通元素,2.组件,3.循环出来的结构</p>
    <button ref="btn1">重置</button>
    <ref-son ref="son" v-for="item in 3" :key="item"></ref-son>
  </div>
</template>

<script>
import RefSon from './RefSon.vue'
export default {
  mounted() {
    // 获取普通元素,类似id
    console.log(this.$refs.btn1);
    console.log(this.$refs.son);
    // 获取子组件中的数据
    console.log('qqqqqq', this.$refs.son[0].num);
    // 调用子组件中的函数
    this.$refs.son[2].showNum()
    // 原生js
    this.$refs.btn1.innerHTML = '充值'
  },
  components: {
    RefSon
  }
}
</script>

<style>

</style>